﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Web.About.NewAbout.about" %>
<%@ Register Src="~/AboutControl/sidebar.ascx" TagPrefix="uc1" TagName="sidebar" %>
<%@ Register Src="~/AboutControl/footer.ascx" TagPrefix="uc1" TagName="footer" %>
<%@ Register Src="~/AboutControl/state.ascx" TagPrefix="uc1" TagName="state" %>
<%@ Register Src="~/AboutControl/headers.ascx" TagPrefix="uc1" TagName="headers" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content="恒信人才,恒信网聘,恒信猎头,恒信派遣,恒信培训,恒信家政"/>
    <meta name="description" content="恒信人才目前是浙江省内最具规模和影响力的专业人力资源公司,全力引进优秀人才,支持浙江新的腾飞!"/>
    <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=yes" name="format-detection"/>
    <meta name="renderer" content="webkit"/>
    <meta content="email=no" name="format-detection"/>
    <link href="css/all.css" rel="stylesheet" />    
    <link href="css/media.css" rel="stylesheet" /><!--各个浏览器响应式属性-->
    <link href="css/animation.css" rel="stylesheet" /><!--图片渐变键入效果样式-->
    <link href="css/base.css" rel="stylesheet" /><!--默认样式重置-->
    <link rel="stylesheet" href="css/lrtk.css" /><!--banner样式-->
    <link href="css/scroll.css" rel="stylesheet" /><!--默认样式重置-->

    <!-- 引入 swiper 核心样式 -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> 

    <script src="js/jquery.js"></script><!--Jquery1.10.1库-->
    <!-- 引入 swiper 核心脚本（放 jQuery 之后，index.js 之前） -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> 
    <script src="js/waypoints.min.js" type="text/javascript"></script><!--滚动监听--> 
    <script src="js/index.js" type="text/javascript"></script><!--滚动监听--> 
    <script src="js/scroll.js" type="text/javascript"></script><!--轮播图--> 
    
</head>  
  <style>

    /* 顶部 banner 图 */
    .top-banner {
      width: 100%;
      /* background: url(/images/about/city-bg.png) center center no-repeat;
      background-size: cover; */
      position: relative;
    }
     .top-banner img{

      width: 100%;
     }

    /* .top-banner::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    } */

    .banner-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 36px;
      font-weight: bold;
      z-index: 1;
    }

    /* 导航栏 */
    .nav {
      width: 100%;
      background-color: white;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .nav-container {
        margin-left: 80px;
    }

    .nav ul {
      display: flex;
    }

    .nav li {
      list-style: none;
      padding: 18px 25px;
      cursor: pointer;
      color: #666;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav li:hover {
      color:   var(--secondary-color);
    }

    .nav li.active {
      color:   var(--secondary-color);
    }

    .nav li.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color:   var(--secondary-color);
    }


    /* 各部分通用样式 */
    .section {
      /* margin: 80px; */
        padding: 80px;

      scroll-margin-top: 80px;
      background: var(--white-color);
    }
 .honor-section{
     padding: 80px 0;
 }
    .compony-center{
        padding-bottom: 20px;
    }
       .compony-center .tt_icon {
            color: rgba(221,161,94,0.1);
        }
@media (max-width: 1700px) {
    .f_64 {
        font-size: 40px;
    }
}
.city-title{
     font-size: 28px;
      color: #000;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      display: inline-block;
}
.honor-title{
    width: 100%;
    text-align: center;
      font-size: 28px;
      color: #000;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      display: inline-block;
}
.honor-box{
  padding:0 80px;
}

    .section-title {
        width: 100%;
      font-size: 28px;
      color: #fff;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      display: inline-block;
    }

    /* 公司介绍 */
    .company-intro {
      display: flex;
      justify-content: space-between;
      gap: 40px;
    }

    .intro-text {
      width:50%;
      line-height: 1.8;
      font-size: 16px;
    }

    .intro-text p {
      margin-bottom: 20px;
    }

    .intro-video {
      width: 42%;
      border-radius: 5px;
      overflow: hidden;
    }

    .intro-video video {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 发展历程 */
    .development-history {
      /* position: relative;
      overflow: hidden;
      height: 500px;
      margin-top: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 5px; */
      width: 100%;
      position: relative;
    }

    .history-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* .history-image {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 100%;
      width: auto;
      cursor: grab;
      transition: transform 0.1s ease-out;
    }

    .history-image:active {
      cursor: grabbing;
    } */
.history-image {
    width: 100%;
}
    .drag-indicator {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 企业文化 */
    .corporate-section{
        background: url(/images/about/ad_1_2.png) no-repeat center;
  background-size: cover;
  padding: 80px;
    }
    .corporate-culture {
      display: flex;
      justify-content: space-between;
      /* gap: 30px; */
      margin-top: 30px;
    }
    .culture-item {
        width:33%;
      flex: 1;
      text-align: center;
      padding: 40px 70px 150px ;
       background: rgba(221, 161, 94, 0.1);
      border-radius: 8px;
      transition: all 0.3s ease;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
    .culture-item:last-child{
        border-right: 0;
    }

  

    .culture-item img {
      /* font-size: 18px;
      color:   var(--white-color); */
      width:30px;
      margin-bottom: 20px;
      transition: transform 0.3s ease;
    }

    .culture-item:hover img {
    transform: translateY(-5px);
    }

    .culture-item h3 {
      font-size: 26px;
      margin-bottom:80px;
      color: #fff;
      transition: transform 0.3s ease;
      position: relative;
    }
 .culture-item h3::after {
    content: '';
     width:36px;
     height: 2px;
     background: #fff;
     position: absolute;
     left: 50%;
     bottom: -40px;
     transform: translate(-50%,0);

    }
    .culture-item:hover h3 {
      transform: translateY(-5px);
    }

    .culture-item p {
      color: #fff;
      font-size: 18px;
      transition: transform 0.3s ease;
      padding: 20px 0;
    }

    .culture-item:hover p {
      transform: translateY(-5px);
    }

    /* 企业荣誉 */
     .honor-section{
     padding: 80px 0;
     width: auto;
 }
    .enterprise-honor {
      margin-top: 30px;
    }
    .honor-line{
        width: 100%;
        /* overflow: hidden; */
    }
    .honor-timeline {
        
       /* display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            padding-bottom: 10px;
            margin-bottom: 30px; */
             display: flex;
    /* justify-content: center; */
    flex-wrap: nowrap;
    /* 添加过渡效果，使拖动更平滑 */
    transition: transform 0.3s ease;
    overflow-x: auto;
    -ms-overflow-style:none;
    scrollbar-width: none;
       
        
    }

    .honor-timeline::-webkit-scrollbar {
      height: 6px;
    }

    .honor-timeline::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 3px;
    }

    .timeline-item {
    
            width: 200px;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0; /* 防止项目缩小 */
        
    }

 

    .timeline-item:hover .line {
       background:  rgba(234, 203, 160, 0.1);

    
}
.timeline-item:hover .year {
    font-size:26px ;
    color:  var(--secondary-color);
}
 .timeline-item:hover .line span {
       background:  var(--secondary-color);

}

    .timeline-item.active .line {
    background:  rgba(234, 203, 160, 0.1);

}
 .timeline-item.active .line  span {
    background:  var(--secondary-color);

}
 .timeline-item.active .year {
      font-size:26px ;
    color:  var(--secondary-color);
}

    .timeline-item .line {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 2;
    margin: 0 auto 25px;
    background: #f2f2f2;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
}
 .timeline-item .line::before {
    content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 90px;
  height: 1px;
  transform: translate(0,-50%);
  background: #666;
}
 .timeline-item .line::after {
    content: '';
  position: absolute;
  right:20px;
  top: 50%;
  width: 90px;
  height: 1px;
  transform: translate(0,-50%);
  background: #666;
}
 .timeline-item .line span {
    display: block;
    width: 10px;
    height: 10px;
    background: #d9d9d9;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: -1;
}
 .timeline-item  .year {
    color: #999;
    line-height: 60px;
    font-family: "jd_r";
    font-size:20px ;

}
    .honor-content {
      display: none;
      padding: 40px 80px;
      background-color: #f9f9f9;
      border-radius: 8px;
      line-height: 1.8;
      animation: fadeIn 0.5s ease;
      min-height: 400px;
      position: relative;
    }
    #honor-2002::after{
        content: '2002';
    }
      #honor-2003::after{
        content: '2003';
    }
      #honor-2004::after{
        content: '2004';
    }
      #honor-2005::after{
        content: '2005';
    }
    #honor-2006::after{
        content: '2006';
    }
      #honor-2007::after{
        content: '2007';
    }
      #honor-2008::after{
        content: '2008';
    }
      #honor-2009::after{
        content: '2009';
    }
      #honor-2010::after{
        content: '2010';
    }
      #honor-2011::after{
        content: '2011';
    }
      #honor-2012::after{
        content: '2012';
    }
      #honor-2013::after{
        content: '2013';
    }
      #honor-2014::after{
        content: '2014';
    }
      #honor-2015::after{
        content: '2015';
    }
      #honor-2016::after{
        content: '2016';
    }

      #honor-2017::after{
        content: '2017';
    }
    #honor-2018::after{
        content: '2018';
    }
      #honor-2019::after{
        content: '2019';
    }
      #honor-2020::after{
        content: '2020';
    }
      #honor-2021::after{
        content: '2021';
    }
      #honor-2022::after{
        content: '2022';
    }
      #honor-2023::after{
        content: '2023';
    }
      #honor-2024::after{
        content: '2024';
    }
    .honor-content::after{
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 200px;
        transform: translate(-50%,-50%);
        color: rgba(235, 200, 161, 0.1);
        text-shadow: 0 0 -5px rgba(221,161,94,0.1);
    }

    .honor-content.active {
      display: block;
    }

    .honor-content h4 {
    width: 100%;
    text-align: center;
    color: var(--secondary-color);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'jd_r';
    left: 50%;
  
    }

    .honor-content p {
      font-size: 16px;
      color: #666;
    }
     

    /* 联系我们 */
    .contact-us {
      background-color: #f9f9f9;
      padding: 40px;
      border-radius: 8px;
      margin-top: 30px;
    }

    .contact-info {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin-top: 20px;
    }

    .contact-item {
      flex: 1;
      min-width: 250px;
    }

    .contact-item h3 {
      font-size: 18px;
      margin-bottom: 15px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .contact-item h3 i {
      color:   var(--secondary-color);
      font-size: 20px;
    }

    .contact-item p {
      margin-bottom: 10px;
      color: #666;
    }

    /* 动画 */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .slittle-tit{
            font-size: 20px;
        }
        .intro-text{
            font-size: 14px;

        }
    }

    @media (max-width: 992px) {
      .company-intro {
        flex-direction: column;
      }
      
      .intro-text, .intro-video {
        width: 100%;
      }
      
      .corporate-culture {
        flex-direction: column;
      }
    }

    @media (max-width: 768px) {
      .nav li {
        padding: 15px 12px;
        font-size: 14px;
      }
      
      .top-banner {
        height: 200px;
      }
      
      .banner-title {
        font-size: 28px;
      }
      
      /* .development-history {
        height: 350px;
      } */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
     <uc1:headers runat="server" id="headers" />
<uc1:sidebar runat="server" ID="sidebar" />
  <!-- 顶部 banner 图 -->
  <div class="top-banner">
    <img src="/images/about/city-bg.png" alt="">
    <!-- <div class="banner-title">关于我们</div> -->
  </div>

  <!-- 导航栏 -->
  <div class="nav">
    <div class="nav-container">
      <ul>
        <li class="active" data-target="company-intro">
          <a href="#company-intro" style="text-decoration: none; color: inherit;">公司介绍</a>
        </li>
        <li data-target="development-history">
          <a href="#development-history" style="text-decoration: none; color: inherit;">发展历程</a>
        </li>
        <li data-target="corporate-culture">
          <a href="#corporate-culture" style="text-decoration: none; color: inherit;">企业文化</a>
        </li>
        <li data-target="enterprise-honor">
          <a href="#enterprise-honor" style="text-decoration: none; color: inherit;">企业荣誉</a>
        </li>
        <li data-target="contact-us">
          <a href="#contact-us" style="text-decoration: none; color: inherit;">联系我们</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 内容容器 -->
  <div class="container">
    <!-- 公司介绍 -->
    <div id="company-intro" class="section">
        <div class="compony-center">
            <div class="tt_icon f_64">About</div>
            <h2 class="city-title little-tit">恒信人才开发股份有限公司</h2>
                <div class="company-intro">
                <div class="intro-text">
                    <p>义乌市恒信人才开发股份有限公司（WWW.91JOB.COM）创立于2002年6月，总部位于中国义乌总部经济园，浙江省三大专业人才网之一，浙中地区主要的人力资源服务公司之一，义乌本土全面专业化人力资源公司，义乌政府采购服务人力资源项目优选供应商。
        公司深耕人力资源行业23年，以网络招聘为核心业务，业务涵盖了猎聘代招、劳务派遣、服务外包、劳动关系托管、人事外包、人力资源咨询、人力资源管理软件、财税咨询、职工技能培训等人力资源多板块、全方位服务。为浙中地区上千家企业提供企业咨询落地方案，为15万余家单位的岗位匹配候选人超1500万人次。</p>
                </div>
                <div class="intro-video">
                    <video autoplay="" width="100%" loop="" muted="" poster="">
                        <source src="/videos/corporateVideo.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
     
    </div>

    <!-- 发展历程 -->
    <div id="development-history" class="development-history">
      <!-- 
        <div class="history-wrapper">
          <img src="/images/about/dhistory.png" alt="发展历程图" class="history-image">
        </div>
        <div class="drag-indicator">
          <i class="fa fa-arrows-h"></i> 拖动图片查看完整历程
        </div> -->

      <img src="/images/about/dhistory.png" alt="发展历程图" class="history-image">

    </div>

    <!-- 企业文化 -->
    <div id="corporate-culture" class="corporate-section">
        <div>

      <h2 class="section-title">企业文化</h2>
      <div class="corporate-culture">
                <div class="culture-item">
                    <!-- <i class="fa fa-bullseye"></i> -->
                     <img src="/images/icon/mission.svg" alt="">
                    <h3>使命</h3>
                    <p>让人才触手可得</p>
                </div>
                <div class="culture-item">
                    <img src="/images/icon/hope.svg" alt="">
                    <h3>愿景</h3>

                    <p>用心智造百年人力资源品牌
</p>
                </div>
                <div class="culture-item">
                   <img src="/images/icon/value.svg" alt="">
                    <h3>核心价值观</h3>
                    <p>客户第一&nbsp; 求真务实&nbsp; 经营思维 </p>
                    <p>感恩&nbsp; 利他 &nbsp;专业&nbsp; 创新</p>

                 
            </div>
        </div>
        </div>

    </div>

    <!-- 企业荣誉 -->
    <div id="enterprise-honor" class="honor-section">
      <h2 class="honor-title">企业荣誉</h2>
    <!-- <div class="m-honor" id="rongyu"> -->
            <div class="honor-box">
                <!-- <h1>荣誉资质</h1>
                <p>HONOR</p>
                <em></em>
                <h2>为客户提供更有价值的互联网招聘服务</h2>
                <h3>To provide customers with more valuable Internet recruitment services</h3> -->
                <div class="wall">
                    <div class="wall-column">
                        <div class="article">
                            <img src="images/2.png" />
                        </div>
                        <div class="article">
                            <img src="images/8.png" />
                        </div>
                        <div class="article">
                            <img src="images/10.6.png" />
                        </div>
                        <div class="article">
                            <img src="images/16.12.png" />
                        </div>
                    </div>
                    <div class="wall-column">
                        <div class="article">
                            <img src="images/3.png" />
                        </div>
                        <div class="article">
                            <img src="images/9.png" />
                        </div>
                        <%--<div class="article">
					<img src="images/13.png" />
				</div>--%>
                        <div class="article">
                            <img src="images/17.9.png" />
                        </div>
                        <div class="article">
                            <img src="images/17.12.png" />
                        </div>
                    </div>
                    <div class="wall-column">
                        <div class="article">
                            <img src="images/15.12.png" />
                        </div>
                        <div class="article">
                            <%--<img src="images/8.png" />--%>
                            <img src="images/6.png" />
                        </div>
                        <div class="article">
                            <img src="images/4.png" />
                        </div>
                    </div>
                    <div class="wall-column">
                        <div class="article">
                            <img src="images/7.png" />
                        </div>
                        <div class="article">
                            <img src="images/10.3.png" />
                        </div>
                        <div class="article">
                            <img src="images/15.5.png" />
                        </div>
                        <%--<div class="article">
					<img src="images/17.12.png" />
				</div>--%>
                    </div>
                </div>
                <%-- <div class="honor-left">
                <img src="images/honor.jpg" />
            </div>
            <div class="honor-right">
                <ul>
                    <%=Getzizhi() %>
                </ul>
            </div>           --%>
                <div class="clear"></div>
            </div>
        <!-- </div> -->

      

    </div>
    </div>
  </div>
        <uc1:footer runat="server" ID="footer" />
        <uc1:state runat="server" ID="state" />
  <script>
    // 导航栏激活状态
    $(window).scroll(function() {
      const scrollPosition = $(window).scrollTop() + 100;
      
      $('.section').each(function() {
        const sectionTop = $(this).offset().top;
        const sectionId = $(this).attr('id');
        
        if (scrollPosition >= sectionTop) {
          $('.nav li').removeClass('active');
          $(`.nav li[data-target="${sectionId}"]`).addClass('active');
        }
      });
    });

    // 发展历程图片拖动功能
    const historyImage = document.querySelector('.history-image');
    let isDragging = false;
    let startX;
    let scrollLeft;

    historyImage.addEventListener('mousedown', (e) => {
      isDragging = true;
      historyImage.classList.add('dragging');
      startX = e.pageX - historyImage.offsetLeft;
      scrollLeft = historyImage.offsetLeft;
      historyImage.style.cursor = 'grabbing';
    });

    historyImage.addEventListener('mouseleave', () => {
      isDragging = false;
      historyImage.classList.remove('dragging');
      historyImage.style.cursor = 'grab';
    });

    historyImage.addEventListener('mouseup', () => {
      isDragging = false;
      historyImage.classList.remove('dragging');
      historyImage.style.cursor = 'grab';
    });

    historyImage.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      e.preventDefault();
      const x = e.pageX - historyImage.offsetLeft;
      const walk = (x - startX) * 1; // 拖动速度
      
      // 计算图片最大可拖动距离
      const wrapperWidth = document.querySelector('.history-wrapper').offsetWidth;
      const imageWidth = historyImage.offsetWidth;
      const maxLeft = 0;
      const maxRight = wrapperWidth - imageWidth;
      
      // 限制拖动范围
      let newLeft = scrollLeft + walk;
      if (newLeft > maxLeft) newLeft = maxLeft;
      if (newLeft < maxRight) newLeft = maxRight;
      
      historyImage.style.left = newLeft + 'px';
    });

    // 触摸设备支持
    historyImage.addEventListener('touchstart', (e) => {
      isDragging = true;
      startX = e.touches[0].pageX - historyImage.offsetLeft;
      scrollLeft = historyImage.offsetLeft;
    }, { passive: true });

    historyImage.addEventListener('touchend', () => {
      isDragging = false;
    });

    historyImage.addEventListener('touchmove', (e) => {
      if (!isDragging) return;
      const x = e.touches[0].pageX - historyImage.offsetLeft;
      const walk = (x - startX) * 1;
      
      const wrapperWidth = document.querySelector('.history-wrapper').offsetWidth;
      const imageWidth = historyImage.offsetWidth;
      const maxLeft = 0;
      const maxRight = wrapperWidth - imageWidth;
      
      let newLeft = scrollLeft + walk;
      if (newLeft > maxLeft) newLeft = maxLeft;
      if (newLeft < maxRight) newLeft = maxRight;
      
      historyImage.style.left = newLeft + 'px';
    }, { passive: false });

    // 企业荣誉时间轴交互
    const timelineItems = document.querySelectorAll('.timeline-item');
    const honorContents = document.querySelectorAll('.honor-content');

    timelineItems.forEach(item => {
      // 点击事件
      item.addEventListener('click', () => {
        const target = item.getAttribute('data-target');
        
        // 更新时间轴激活状态
        timelineItems.forEach(i => i.classList.remove('active'));
        item.classList.add('active');
        
        // 更新内容显示
        honorContents.forEach(content => content.classList.remove('active'));
        document.getElementById(target).classList.add('active');
      });
      
      // 鼠标滑过事件
      item.addEventListener('mouseenter', () => {
        // 自动滚动到当前项
        // item.scrollIntoView({
        //   behavior: 'smooth',
        //   block: 'nearest',
        //   inline: 'center'
        // });
        
        // 延迟一点时间再激活，让滚动完成
        setTimeout(() => {
          const target = item.getAttribute('data-target');
          
          // 更新时间轴激活状态
          timelineItems.forEach(i => i.classList.remove('active'));
          item.classList.add('active');
          
          // 更新内容显示
          honorContents.forEach(content => content.classList.remove('active'));
          document.getElementById(target).classList.add('active');
        }, 300);
      });
    });
    // 获取时间轴容器
const timeline = document.querySelector('.honor-timeline');
let istimeDragging = false;
let timestartX;
let timescrollLeft;

// 鼠标按下事件
timeline.addEventListener('mousedown', (e) => {
    istimeDragging = true;
    timestartX = e.pageX - timeline.offsetLeft;
    timescrollLeft = timeline.scrollLeft;
    timeline.style.cursor = 'grabbing';
});

// 鼠标移动事件
timeline.addEventListener('mousemove', (e) => {
    if (!istimeDragging) return;
    e.preventDefault();
    const x = e.pageX - timeline.offsetLeft;
    const walk = (x - timestartX) * 1; // 拖动速度
    const newScrollLeft = timescrollLeft - walk;
    // 限制滚动范围
    // 将左边界从0改为负数（允许向左滚动超出容器）
timeline.scrollLeft = Math.max(0, Math.min(newScrollLeft, timeline.scrollWidth - timeline.offsetWidth));
});

// 鼠标抬起事件
timeline.addEventListener('mouseup', () => {
    istimeDragging = false;
    timeline.style.cursor = 'grab';
});

// 触摸开始事件
timeline.addEventListener('touchstart', (e) => {
    istimeDragging = true;
    timestartX = e.touches[0].pageX - timeline.offsetLeft;
    timescrollLeft = timeline.scrollLeft;
});

// 触摸移动事件
timeline.addEventListener('touchmove', (e) => {
    if (!istimeDragging) return;
    e.preventDefault();
    const x = e.touches[0].pageX - timeline.offsetLeft;
    const walk = (x - timestartX) * 1;
    const newScrollLeft = timescrollLeft - walk;
    timeline.scrollLeft = Math.max(-900, Math.min(newScrollLeft, timeline.scrollWidth - timeline.offsetWidth));
});

// 触摸结束事件
timeline.addEventListener('touchend', () => {
    istimeDragging = false;
});

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>

</html>
